<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
        #app{
        width: 480px;
        margin: 40px auto;
    }
    h2{
        margin: 0;
    }
    .card{
        width: 480px;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 /10%);
        border-radius: 4px;
        border: 1px solid #ebeef5;
        background-color: #fff;
        overflow: hidden;
        color: #303133;
        transition: .3s;
    }
    .card-header{
        display: flex;
        align-items: center;
        padding: 18px 20px;
        border-bottom: 1px solid #ebeef5;
        box-sizing: border-box;
    }
    .card-body{
        padding: 20px;
    }
    .card-title{
        flex: 1;
    }
    a{
        position: relative;
        font-size: 14px;
        font-weight: 500;
        color: #409eff;
        text-decoration: none;
    }
    a:hover:after{
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 0;
        bottom: 0;
        border-bottom: 1px solid #409eff;
    }
    .row{
        display: flex;
        font-size: 18px;
        margin-bottom: 5px;
        align-items: center;
    }
    .row-label{
        font-weight: bold;
        flex: 1.5;
    }
    .row-content{
        flex: 3.5;
    }
</style>
<body>
    <script src="/js/vue.js"></script>
    <div id ="app">
       <my-card>
        <template v-slot:title>
            <h2>个人信息</h2>
        </template>
        <template v-slot:btns>
            <a href="javascript:;">详情</a>
        </template>
        <template v-slot:body>
            <div class="row">
                <div class="row-label">姓名：</div>
                <div class="row-content">张三</div>
                <div class="row-label">年龄：</div>
                <div class="row-content">23</div>
            </div>
            <div class="row">
                <div class="row-label">单位：</div>
                <div class="row-content">xx 科技有限公司</div>
                <div class="row-label">电话：</div>
                <div class="row-content">131xx783421</div>
            </div>
        </template>
       </my-card>
    </div>
    <script type="text/x-template" id="my-card">
        <div class="card">
            <div class="card-header">
                <div class="card-title">
                    <slot name="title"></slot>
                </div>
                <div class="card-btns">
                    <slot name="btns"></slot>
                </div>
            </div>
                <div class="card-body">
                    <slot name="body"></slot>
            </div>
        </div>
</script>
    <script>
        Vue.component('my-card',{
            template:'#my-card'
        })
       let app =new Vue({
         el:"#app",
       })
    </script>  
</body>
</html>
